import { Component, OnInit,ElementRef, ViewChild,ViewChildren,Renderer , AfterViewInit,AfterContentInit ,TemplateRef,ViewContainerRef,QueryList,ContentChild,ContentChildren} from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/delay';
import {P2C2Component} from './p2-c2/p2-c2.component'
import {P2C1Component} from './p2-c1/p2-c1.component'

@Component({
  selector: 'app-page02',
  templateUrl: './page02.component.html',
  styleUrls: ['./page02.component.css']
})
export class Page02Component implements OnInit {
    @ViewChild('myInput') input: ElementRef;
    @ViewChild('greet') greetP:ElementRef;
    @ViewChild('tpl') tplRef: TemplateRef<any>;

    @ViewChild('tpl', { read: ViewContainerRef }) tplVcRef: ViewContainerRef;
    // @ViewChild(P2C2Component) childCmp: P2C2Component;
    @ViewChildren(P2C2Component) childrenCmp:QueryList<P2C2Component>


    @ContentChild(P2C2Component) childCmp:P2C2Component;
    @ViewChild(P2C1Component) childP2c1:P2C1Component;
    @ContentChild(P2C2Component) contentChildren:QueryList<P2C2Component>
    username:string=''
    auth;
    p2c1name:string='p2c1name';

    num=0;
    constructor(private el:ElementRef,private renderer:Renderer) {
        this.auth = Observable
      .of({ username: 'semlinker', password: 'segmentfault' })
      .delay(new Date(Date.now() + 2000));
     }

    ngOnInit() {

    }

    ngAfterContentInit(){
        // console.log(this.childCmp);
        // console.log(this.contentChildren);
    }

    ngAfterViewInit(){
        // console.log(this.el)
        // console.log(this.greetP);
        // this.renderer.setElementStyle(this.greetP.nativeElement,'backgroundColor','red');
        // this.childP2c1.name='p22c11nam'
        console.log(this.childP2c1)
        // this.childP2c1.name='frfrsrfwtegrtw'
    }

    numInc(){
        this.num++
    }

}
